<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item label="攻略名称">
        <el-input
          v-model="form.title"
          placeholder="输入攻略名称:模糊查询"
          @keyup.native.enter="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-table class="desczh" :data="noteData">
      <el-table-column label="序号" prop="sid"></el-table-column>
      <el-table-column label="所属景点" prop="title"></el-table-column>
      <el-table-column label="点赞" prop="praise"></el-table-column>
      <!-- <el-table-column
        width="300"
        height="100px"
        label="详细信息"
        prop="desc"
      ></el-table-column> -->
      <el-table-column
        label="景点地址"
        prop="place"
        width="400px"
      ></el-table-column>
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img :src="scope.row.src" width="130px" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            title="删除攻略"
            @click="delItem(scope.row.sid)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="->,prev, pager, next,total,jumper"
      :current-page="this.page"
      :page-size="this.pagesize"
      :total="this.total"
      @current-change="pageChange"
      style="margin-top: 30px"
    >
    </el-pagination>
  </div>
</template>

<script>
import myaxios from '@/http/MyAxios.js'
export default {
  data() {
    return {
      keyword: '',
      form: {
        title: '', // 绑定模糊查询的姓名
      },
      noteData: [],
      page: 1,
      pagesize: 5,
      total: 0,
    }
  },
  methods: {
    onSubmit() {
      this.keyword = this.form.title
      if (this.form.title) {
        let params = {
          title: this.form.title,
          page: 1,
          pagesize: this.pagesize,
        }
        this.$http.noteApi.mohu(params).then(res => {
          console.log('131', res)
          this.noteData = res.data.data
          this.total = res.data.total
        })
      } else {
        let params = {
          page: this.page,
          pagesize: this.pagesize,
        }
        this.$http.noteApi.list(params).then(res => {
          console.log(res)
          this.noteData = res.data.data
          this.total = res.data.total
        })
      }
    },

    pageChange(page) {
      console.log(page)
      let params = { page: page, pagesize: this.pagesize }
      this.$http.noteApi.list(params).then(res => {
        console.log(res)
        this.noteData = res.data.data
        this.page = page
      })
    },

    delItem(sid) {
      console.log('待删除攻略的ID：' + sid)
      // 弹出确认删除对话框
      this.$confirm('该操作将永久删除攻略，是否继续？', '提示', {
        type: 'warning',
      }).then(() => {
        // 确认删除
        // 发送请求，执行删除操作
        console.log(sid)
        this.$http.noteApi.delete(sid).then(res => {
          // this.$http.noteApi.delete({ sid }).then(res => {
          this.$message({ type: 'success', message: '删除成功' })
          // 刷新当前列表  整理参数发送请求

          // 发送请求，加载攻略列表

          let params = {
            page: this.page,
            pagesize: this.pagesize,
          }
          this.$http.noteApi.list(params).then(res => {
            console.log(res)
            this.noteData = res.data.data
            this.total = res.data.total
          })

          // let url = 'http://127.0.0.1:3000/users/strategy'
          // myaxios.get(url).then(res => {
          //   console.log('加载初始化的攻略列表', res)
          //   // 将res.data.data存入this.noteData
          //   this.noteData = res.data.data
          // })
        })
      })
    },
  },
  /** 组件挂载完毕后自动调用 生命周期方法 */
  mounted() {
    // 发送请求，加载攻略列表
    let params = {
      page: this.page,
      pagesize: this.pagesize,
    }
    this.$http.noteApi.list(params).then(res => {
      console.log(res)
      this.noteData = res.data.data
      this.total = res.data.total
    })
  },
}
</script>

<style lang="scss" scoped>
.desczh {
  display: inline-block;
  white-space: nowrap;
  //  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-divider {
  margin: 0 0 24px 0;
}
</style>
